import React, { useState, useEffect } from "react";
import { Radio, Input, Button, Slider } from "antd";
import Oll from "@/media/model/oll.png";
import DeepSeek from "@/media/model/deepseek.png";
const App = () => {
  const [value, setValue] = useState(false);
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  const { TextArea } = Input;
  const handleContentClick = (e) => {
    e.stopPropagation();
  };
  return (
    <>
      <div className="content-top" onClick={(e) => e.stopPropagation()}>
        <div className="text-[14px] font-semibold text-theme-text-default">
          LLM提供者
        </div>
        <Radio.Group
          className="flex items-center justify-between w-[200px] my-[14px] text-[14px] text-theme-text-default"
          name="radiogroup"
          defaultValue={1}
          options={[
            { value: 1, label: "本地模型" },
            { value: 2, label: "在线模型" },
          ]}
        />
        <div className="flex items-center text-[14px] text-theme-text-default">
          <img src={Oll} alt="Logo" className="h-[24px] w-[24px] mr-[6px]" />
          <span>Ollama 暂不可用，</span>
          <span className="text-[14px] text-theme-modal-deploy cursor-pointer">立即本地部署模型</span>
        </div>
        <div className="text-[12px] text-theme-modal-des mt-[6px]">
          包含海量模型：Deepseek、OpenAi、GPT-4、LangChain、PineconeDB、ChromaDB...
        </div>

        <div className="text-[14px] font-semibold text-theme-text-default mt-[32px]">聊天模式</div>
        <Radio.Group
          className="flex items-center justify-between w-[128px] mt-[12px] mb-[4px] text-[14px] text-theme-text-default"
          name="radiogroup"
          defaultValue={1}
          options={[
            { value: 1, label: "聊天" },
            { value: 2, label: "查询" },
          ]}
        />
        <div className="text-[12px] text-theme-modal-des ml-[22px]">
          *聊天 将提供 LLM 的一般知识 和 找到的文档上下文的答案
        </div>
        
        <div className="mt-[32px]">
          <div className="text-[14px] font-semibold text-theme-text-default">
            聊天历史记录
          </div>
          <div className="text-[13px] text-theme-modal-tips mt-[10px] mb-[4px]">
            在响应的短期记忆中的先前聊天的数量，推荐20，最大45
          </div>
          <div className="flex items-center justify-between flex-1">
              <Slider defaultValue={30} min={20} max={45} className="w-[330px] mr-[40px]"/>
              <Input placeholder="Basic usage" className="flex-1 h-[36px] rounded-[8px] chat-history-input"/>
          </div>
        </div>

        <div className="mt-[32px]">
          <div className="text-[14px] font-semibold text-theme-text-default">
            严谨与想象
          </div>
          <div className="flex items-center justify-between flex-1">
              <Slider defaultValue={30} min={20} max={45} className="w-[330px] mr-[40px]"/>
              <Input placeholder="Basic usage" className="flex-1 h-[36px] rounded-[8px] chat-history-input"/>
          </div>
        </div>

        <div className="mt-[32px]">
          <div className="text-[14px] font-semibold text-theme-text-default pb-[12px]">
            聊天提示（角色设定）
          </div>
          <TextArea
            className="chat-tips-remarks px-[12px] py-[8px] rounded-[8px]"
            value={value}
            onChange={e => setValue(e.target.value)}
            placeholder="Controlled autosize"
            autoSize={{ minRows: 3, maxRows: 5 }}
          />
        </div>
      </div>
      {/* <div className="content-bottom flex items-center justify-end">
        <Button color="default" variant="link" onClick={handleCancel}>
          取消
        </Button>
        <Button type="link">重置</Button>
        <Button color="primary" variant="link">
          保存
        </Button>
      </div> */}
    </>
  );
};
export default App;
